<template>
  <div>
    <van-nav-bar title="收藏" left-arrow @click-left="$router.back()" />
    <van-cell
      v-for="(item, index) in list"
      :key="index"
      :title="item.title"
      @click="$router.push({ name: 'article', params: { articleId: item.art_id } })"
    >
      <div slot="label" class="title">
        <span>作者:{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate | relativeTime }}</span>
      </div>
    </van-cell>
  </div>
</template>

<script>
import { getUserCollection } from '@/api/user.js'

export default {
  name: 'MyCollection',
  data() {
    return {
      list: [], // 用户收藏列表
      page: 1, // 页数
      perPage: 10 // 每页数量
    }
  },
  methods: {
    async getCollection() {
      const { data } = await getUserCollection({
        page: this.page, // 页数
        per_page: this.perPage // 每页数量
      })
      console.log(data)
      const { results } = data.data
      this.list.push(...results)
    }
  },
  created() {
    this.getCollection()
  }
}
</script>

<style lang="less" scoped>
.title {
  span {
    margin: 5px 8px 5px 0;
  }
}
</style>
